<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>双人五子棋2.0</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		.gobang{
			margin:10px auto;
			width:642px;
			height: 642px;
			/*border:1px solid;*/
			background: url(picture/bak.jpg);
			overflow: hidden;
		}
		.text{
			margin:0 auto;
			width:100px;
			height:40px;
			text-align: center;
			color:#f00;
			border:1px solid red;
			line-height: 40px;
			display: block;
		}
		#can{
			margin:0px auto;
			border:1px solid green;
			display: block;
		}
	</style>
</head>
<body>
<canvas class="text">PK</canvas>
<div class="gobang">
	
	<canvas id="can" width="640" height="640">
		您的浏览器不支持canvas
	</canvas>
</div>
<script>
	var text = document.getElementsByClassName('text');	


	
	//定义二维数组作为棋盘
	var maps = new Array(16);
	var len = maps.length;
	// alert(len)
	var url="";  
	for(var i=0;i<len;i++){
		maps[i] = new Array();
		for(var j = 0;j<len;j++){
			maps[i][j] = 0;
			// console.log(maps[i][j]);
		}
	}

	//初始化棋子
	var black = new Image();
	var white = new Image();
	var clientWidth = document.documentElement.clientWidth;
	black.src = "picture/black.png";
	white.src = "picture/white.png";
	//棋盘初始化
	var can = document.getElementById('can');
	var ctx = can.getContext("2d");  //获取该canvas的2D绘图环境对象
	ctx.strokeStyle = "#333";
	for(var m=0;m<len-1;m++){
		for(var n=0;n<len-1;n++){
			ctx.strokeRect(m*40+20,n*40+20,40,40);  //绘制40的小正方形
		}
	}
	//绘制文字
	var can1 = document.getElementsByClassName('text');
	var ctx1 = can1[0].getContext("2d");

	ctx1.beginPath();
	ctx1.font=("100px Georgia");
	ctx1.fillStyle="#F70707";
	// ctx1.fillText("Hello",40,100);

	var isBlack = true;
	//下子
	can.onclick=function play(e){
		// alert(e.clientX);
		//获取棋盘偏移量
		var l = this.offsetLeft+20;
		var t = this.offsetTop+20;
		//获取点击相对棋盘坐标
		var x =e.clientX - l;
		var y = e.clientY -t;
		// alert(x);
		var row,col,index = 0;

		if(x%40 < 20){
			col = parseInt(x/40);
		}else{
			col = parseInt(x/40)+1;
		}
		row = y%40<20 ? parseInt(y/40) : parseInt(y/40)+1;
		// alert(row+"行"+col+"行");  //第几列行第几列
		
		if(maps[row][col]===0){
				if(isBlack){
				ctx.drawImage(black,col*40,row*40);   //下黑子
				isBlack = false;
				maps[row][col] = 2; //黑子为2
				iswin(2,row,col);
			}else{
				ctx.drawImage(white,col*40,row*40);
				isBlack = true;
				maps[row][col] = 1; //白子为1
				iswin(1,row,col);
			}
		}

		function iswin(t,row,col){
			var orgrow,orgcol,total;
			reset();
			// alert(total);

			//判断每行是否有五个
			while(col>0 &&maps[row][col-1]==t){  //当前子左边还有
				total++;
				col--;
				
			};
			row = orgrow;
			col = orgcol;
			while(col+1<16 &&maps[row][col+1]==t){  //当前子右边还有
				col++;
				total++;
			};
			// alert(total);
			celebrate();

			//判断每列是否有五个
			reset();

			while(row>0&&maps[row-1][col]==t){   //当前子上面还有
				total++;
				row--;
			}
			row = orgrow;
			col = orgcol;
			while(row+1<16&&maps[row+1][col]==t){  //下面
				total++;
				row++;
			}
			celebrate();

			//左上 右下有没有五个
			reset();
			while(row>0&&col>0&&maps[row-1][col-1]==t){ //左上1
				row--;
				col--;
				total++;
			}
			row = orgrow;
			col = orgcol;
			while(row+1<16&&col+1<16&&maps[row+1][col+1]==t){  //右下1
				row++;
				col++;
				total++;
			}
			// alert(total)
			celebrate();

			//左下 右上有没有五个
			reset();
			// alert(total);
			while(row>0&&col+1<16&&maps[row-1][col+1]==t){  //右上
				row--;
				col++;
				total++;
			}
			row = orgrow;
			col = orgcol;
			while(row+1<16&&col>0&&maps[row+1][col-1]==t){   //左下
				row++;
				col--;
				total++;
			}
			// alert(total);
			celebrate();
			function celebrate(){       //显示哪边赢
				if(total>=5){
						if(t==1){
							// alert("白子赢");
							// text[0].innerHTML="白子赢";
							// cxt1.clearRect(0,0,can1.width,can1.height);
							ctx1.clearRect(0,0,can1[0].width,can1[0].height);
							ctx1.fillText("白子赢",0,100);
							alert("白子赢");
                            window.location.reload(); 
						}else{
							// alert("黑子赢");
							// text[0].innerHTML="黑子赢";
							// cxt1.clearRect(0,0,can1.width,can1.height);
							ctx1.clearRect(0,0,can1[0].width,can1[0].height);
							ctx1.fillText("黑子赢",0,100);
							alert("黑子赢");
                            window.location.reload(); 
						}
					}
			}
			function reset(){
				 orgrow = row;
				 orgcol = col;
				 total = 1;
			}
		}
		
	}
</script>
<div style="text-align:center;">
<p><a href="#">重新开始</a></p>
</div>
</body>
</html>